<template>
  <div id="Test">
    <div class="showChecked" v-show="checkedChild.length">
      展示选中项

      <div >
      <span class="tit" v-for="child in checkedChildName" data-id="child.id" :key="child.id"   @click=" SecendTitClick('',child)">{{child}}</span>
      </div>

    </div>
    <div v-for="Item in dataSource" :data-id="Item.id" :data-tit="Item.title" :key="Item.id" :class="['FirstTit',{active:currentItem.id==Item.id}]" @click="FirstTitClick(Item.id)">
      <div class="tit" >{{Item.title}}</div>
    </div>
    <br>
    <div v-for="child in currentItem.children" data-id="child.id" :key="child.id"  :class="['SecendTit',{active: checkedChild.indexOf(child.title)>-1 }]" @click=" SecendTitClick(child.id,child.title)">
      <div class="tit">{{child.title}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        // 数据源
        dataSource: [
          {
            id: "0",
            title: "商务",
            children: [
              {
                id: "0-0",
                title: "单源"
              },
              {
                id: "0-1",
                title: "渠道"
              },
              {
                id: "0-2",
                title: "培训"
              }
            ]
          },
          {
            id: "1",
            title: "主案",
            children: [
              {
                id: "1-0",
                title: "培训"
              },
              {
                id: "1-1",
                title: "系统"
              }
            ]
          },
          {
            id: "2",
            title: "工程",
            children: [
              {
                id: "2-0",
                title: "质量"
              },
              {
                id: "2-1",
                title: "材料"
              },
              {
                id: "2-2",
                title: "施工团队"
              },
              {
                id: "2-3",
                title: "平台"
              }
            ]
          },
          {
            id: "3",
            title: "管理",
            children: [
              {
                id: "3-0",
                title: "日常管理"
              },
              {
                id: "3-1",
                title: "系统管理"
              },
              {
                id: "3-2",
                title: "管理经验"
              }
            ]
          },
          {
            id: "4",
            title: "关系",
            children: [
              {
                id: "4-0",
                title: "财务"
              },
              {
                id: "4-1",
                title: "业务"
              }
            ]
          },
          {
            id: "5",
            title: "资金",
            children: [
              {
                id: "5-0",
                title: "利润"
              },
              {
                id: "5-1",
                title: "提点"
              },
              {
                id: "5-2",
                title: "加盟费"
              },
              {
                id: "5-3",
                title: "投资金额"
              }
            ]
          },
          {
            id: "6",
            title: "人员",
            children: [
              {
                id: "6-0",
                title: "人数"
              },
              {
                id: "6-1",
                title: "成本"
              },
              {
                id: "6-2",
                title: "团队组建"
              }
            ]
          },
        ],
        // 当前选中的父级
        currentItem: { id: "" },
        // 选中的子集id的集合
        checkedChild: [],
        // 选中的子集name的集合
        checkedChildName: [],
      };
    },
    mounted() {
    },
    methods: {
      // 一级标题的点击事件
      FirstTitClick(id) {
        this.currentItem = (this.currentItem.id !== id &&
          this.dataSource[id]) || { id: "" };
        console.log(this.currentItem)
      },
      // 二级标题的点击事件 传入当前点击的子标题id
      SecendTitClick(childID,childName) {
        // 判断当前  选中的子集id的集合  中 有没有当前点击的项
        if (this.checkedChild.indexOf(childName) > -1) {
          // 如果有  删掉当前id
          var index = this.checkedChild.indexOf(childName);
          this.checkedChild.splice(index, 1);
          this.checkedChildName.splice(index, 1);
        } else {
          // 如果没有 push当前id  到  选中的子集id的集合
          this.checkedChild.push(childName);
          this.checkedChildName.push(childName);
        }
      }
    }
  };
</script>
<style >
  #Test {
    width: 100%;
    height: 100%;
    padding: 0.54rem;
    box-sizing: border-box;
    font-size: 0.26rem;
    background-color: #fff;
  }
  .showChecked {
    background-color: rgb(222, 226, 204);
    height: 3rem;
  }
  .FirstTit {
    font-size: 0.26rem;
    display: inline-block;
  }
  .SecendTit {
    font-size: 0.2rem;
    display: inline-block;
  }
  .tit {
    background-color: #ccc;
    height: 0.3rem;
    width: auto;
    display: inline-block;
    padding: 0.1rem;
    margin: 0.1rem;
  }
  .active {
    color: rgb(209, 34, 34);
  }
  .active .tit {
    background-color: rgb(30, 106, 221);
  }
</style>
